<template>
  <div class="space-y-4">
    <!-- 学历要求 -->
    <div class="flex items-center py-2 border-b border-gray-100">
      <span class="text-gray-500 w-24 flex-shrink-0 text-sm">学历要求</span>
      <div class="flex flex-1 items-center flex-wrap gap-2">
        <button 
          v-for="option in educationOptions"
          :key="option"
          @click="toggleFilter('education', option)"
          :class="getFilterButtonClass('education', option)"
        >
          {{ option }}
        </button>
      </div>
    </div>

    <!-- 院校要求 -->
    <div class="flex items-center py-2 border-b border-gray-100">
      <span class="text-gray-500 w-24 flex-shrink-0 text-sm">院校要求</span>
      <div class="flex flex-1 items-center flex-wrap gap-2">
        <button 
          v-for="option in schoolOptions"
          :key="option"
          @click="toggleFilter('school', option)"
          :class="getFilterButtonClass('school', option)"
        >
          {{ option }}
        </button>
      </div>
    </div>

    <!-- 经验要求 -->
    <div class="flex items-center py-2 border-b border-gray-100">
      <span class="text-gray-500 w-24 flex-shrink-0 text-sm">经验要求</span>
      <div class="flex flex-1 items-center flex-wrap gap-2">
        <button 
          v-for="option in experienceOptions"
          :key="option"
          @click="toggleFilter('experience', option)"
          :class="getFilterButtonClass('experience', option)"
        >
          {{ option }}
        </button>
      </div>
    </div>

    <!-- 年龄要求 -->
    <div class="flex items-center py-2 border-b border-gray-100">
      <span class="text-gray-500 w-24 flex-shrink-0 text-sm">年龄要求</span>
      <div class="flex flex-1 items-center flex-wrap gap-2">
        <button 
          v-for="option in ageOptions"
          :key="option"
          @click="toggleFilter('age', option)"
          :class="getFilterButtonClass('age', option)"
        >
          {{ option }}
        </button>
      </div>
    </div>

    <!-- 其他筛选 -->
    <div class="flex items-center py-2">
      <span class="text-gray-500 w-24 flex-shrink-0 text-sm">其他筛选</span>
      <div class="flex flex-1 items-center flex-wrap gap-3">
        <FilterDropdown 
          v-for="filter in otherFilters"
          :key="filter.key"
          :label="filter.label"
          :options="filter.options"
          @select="handleOtherFilter(filter.key, $event)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FilterDropdown from './FilterDropdown.vue'

const emit = defineEmits<{
  filterChange: [filters: Record<string, any>]
}>()

const selectedFilters = ref<Record<string, string[]>>({
  education: ['不限'],
  school: ['不限'],
  experience: ['不限'],
  age: ['不限']
})

const educationOptions = ['不限', '本科及以上', '硕士及以上', '博士', '自定义']
const schoolOptions = ['不限', '统招本科', '双一流院校', '211院校', '985院校', '留学生', 'QS 100', 'QS 500']
const experienceOptions = ['不限', '在校/应届', '24年毕业', '25年毕业', '25年后毕业', '1-3年', '3-5年', '5-10年', '自定义']
const ageOptions = ['不限', '20-25', '25-30', '30-35', '35-40', '40-50', '50以上', '自定义']

const otherFilters = [
  { key: 'gender', label: '性别', options: ['不限', '男', '女'] },
  { key: 'salary', label: '薪资区间', options: ['不限', '10K以下', '10-20K', '20-30K', '30-50K', '50K以上'] },
  { key: 'activity', label: '牛人活跃度', options: ['不限', '今日活跃', '3天内活跃', '一周内活跃', '一月内活跃'] },
  { key: 'jobFrequency', label: '跳槽频率', options: ['不限', '稳定型', '正常型', '频繁型'] },
  { key: 'jobStatus', label: '求职状态', options: ['不限', '离职-随时到岗', '在职-月内到岗', '在职-考虑机会', '在职-暂不考虑'] },
  { key: 'jobRequirement', label: '牛人职位要求', options: ['不限', '有明确要求', '要求灵活'] },
  { key: 'major', label: '专业', options: ['不限', '计算机', '市场营销', '工商管理', '其他'] }
]

const getFilterButtonClass = (category: string, option: string) => {
  const isSelected = selectedFilters.value[category]?.includes(option)
  return [
    'px-3 py-1 rounded-full text-sm transition-colors',
    isSelected 
      ? 'bg-primary text-white' 
      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
  ]
}

const toggleFilter = (category: string, option: string) => {
  if (!selectedFilters.value[category]) {
    selectedFilters.value[category] = []
  }
  
  if (option === '不限') {
    selectedFilters.value[category] = ['不限']
  } else {
    const index = selectedFilters.value[category].indexOf(option)
    if (index > -1) {
      selectedFilters.value[category].splice(index, 1)
    } else {
      selectedFilters.value[category] = selectedFilters.value[category].filter(item => item !== '不限')
      selectedFilters.value[category].push(option)
    }
    
    if (selectedFilters.value[category].length === 0) {
      selectedFilters.value[category] = ['不限']
    }
  }
  
  emit('filterChange', selectedFilters.value)
}

const handleOtherFilter = (key: string, value: string) => {
  selectedFilters.value[key] = [value]
  emit('filterChange', selectedFilters.value)
}
</script>
